<template>
  <div class="content-container" style="position: relative">
    <img class="system-logo-icon" src="@/assets/logo.png"></img>

    <div style="height: 10px"></div>
    <div class="panel" style="background-color: rgba(255,255,255,0.7);width: 1400px;margin-left: auto;margin-right: auto;padding-bottom: 10px;border-radius: 8px">
      <div >
        <img style="height: 200px;margin-top: 10px;margin-left: 5px" :src="course.kcfmwj" />
        <div style="text-align: center;font-weight: bold;color: #000000;font-size: x-large;line-height: 50px">{{course.kcmc00}}<span style="color: #FF6B6B;margin-left: 20px">￥{{course.kcjg00}}</span></div>
      </div>
      <div style="background-color: white;margin-left: 20px;margin-right: 20px;padding: 10px;">
        <div style="text-align: left;font-size: large;font-weight: bold;margin-left: 10px;padding-top: 10px;margin-bottom: 10px">基本信息</div>
        <div  style="text-align: left;margin-left: 10px;background-color: #dedede;padding: 10px;margin-right: 10px " v-html="course.kcyq00"></div>
        <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px;padding-left: 10px">
          <span style="margin-left: 10px">开课类型:&nbsp;{{dict.kklx00[course.kklx00]}}</span>
        </div>
        <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px;padding: 10px;">
          <span style="margin-left: 10px">培训地点:&nbsp;&nbsp;{{course.pxdd00}}</span>
        </div>
        <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px;padding: 10px;">
          <span style="margin-left: 10px">课程类别:&nbsp;&nbsp;{{course.kclbmc}}</span>
        </div>
        <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px;padding: 10px;">
          <span style="margin-left: 10px">课程状态:&nbsp;&nbsp;{{dict.kczt00[course.kczt00]}}</span>
        </div>
        <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px;padding: 10px;">
          <span style="margin-left: 10px">收费方式:&nbsp;&nbsp;{{dict.kcsffs[course.kcsffs]}}</span>
        </div>
        <div style="text-align:left;font-size: large;color: #000000;margin-top: 10px;padding: 10px;">
          <span style="margin-left: 10px">联系方式:&nbsp;&nbsp;{{course.lxrdh0}}</span>
        </div>
      </div>
      <div style="background-color: white;margin-left: 20px;margin-right: 20px;margin-top: 20px ;margin-bottom:20px;padding: 10px;">
        <div style="text-align: left;font-size: large;font-weight: bold;margin-left: 10px;padding-top: 10px;margin-bottom: 10px">课程介绍</div>
        <div  style="padding: 10px;text-align: left" v-html="course.kcjj00">
        </div>
      </div>
      <div style="background-color: white;margin-left: 20px;margin-right: 20px;margin-top: 20px ;margin-bottom:  20px;padding: 10px;">
        <div style="text-align: left;font-size: large;font-weight: bold;margin-left: 10px;padding-top: 10px;margin-bottom: 10px">该机构其他培训课程</div>
        <div  style="display: flex;flex-wrap: wrap">
          <div v-for="(item,index) in courseData" :key="index" @click="$router.push({path:'/course-detail',query:{kcxh00:item.kcxh00,pxjgxh:item.pxjgxh}});$router.go(0)">
            <div style="width: 300px;margin-left: 10px">
              <img :src="item.kcfmwj" style="width: 300px;height: 200px;"/>
            </div>
            <div style="width: 300px;text-align: center;font-weight: bold">{{item.kcmc00}}</div>
          </div>
        </div>
      </div>
      <div style="background-color: white;margin-left: 20px;margin-right: 20px;margin-top: 20px ;margin-bottom:  20px;padding: 10px;">
        <div style="text-align: left;font-size: large;font-weight: bold;margin-left: 10px;padding-top: 10px;margin-bottom: 10px">培训机构</div>
        <div  style="display: flex">
          <div  @click="$router.push({path:'/school-detail',query:{pxjgxh: pxjgxh}})">
            <div style="width: 300px;margin-left: 10px">
              <img :src="insiData.logo" style="width: 300px;height: 200px;"/>
            </div>
            <div style="width: 300px;text-align: center;font-weight: bold">{{insiData.pxjgmc}}</div>
            <div style="width: 300px;text-align: center;font-weight: bold">地址:{{insiData.pxjgdz}}</div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {skillsTrainingApi} from "@/api";
import {courseInfo, institutionInfo} from "@/api/modules/skillsTrainingApi";
export default {
  name:"course-detail",
  components:{
    ReturnBtn
  },
  data(){
    return {
      insiData:"",
      courseData:[],
      course:"",
      dict:{
        "kklx00": {
          "1": "随到随学",
          "2": "周末课"
        },
        "kczt00": {
          "1": "未开放",
          "2": "招生中",
          "3": "关闭招生"
        },
        "kcsffs": {
          "1": "到场收费",
          "2": "线上收费"
        }
      },
      pxjgxh:"",
      kcxh00:""
    }
  },
  mounted() {

  },
  created() {
    this.pxjgxh=this.$route.query.pxjgxh
    this.kcxh00=this.$route.query.kcxh00
    this.courseInfo()
    this.queryInstitutionInfo()
    this.queryCourse()
  },
  methods: {
    courseInfo(){
      skillsTrainingApi.courseInfo({kcxh00:this.kcxh00}).then((res) => {
        this.course=res.data
      }).catch(()=>{

      })
    },
    queryCourse(){
      skillsTrainingApi.queryCourse({kcxh00:this.kcxh00,pxjgxh:this.pxjgxh, limit:100,page:1}).then((res) => {
        this.courseData=res.data.records
        console.log(this.courseData)
      }).catch(()=>{

      })
    },
    queryInstitutionInfo(){
      skillsTrainingApi.institutionInfo({pxjgxh:this.pxjgxh}).then((res) => {
        this.insiData=res.data
      }).catch(()=>{

      })
    }

  }
}
</script>
<style lang="scss" scoped>
.bg{
  width: 400px;
  z-index: -1;
  left: 10px;
  top: 150px;
  position: absolute;
}
</style>
